{% extends "base.html" %} {% load static %} {% block extra_head %}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css"
/>
<link rel="stylesheet" href="{% static 'css/sonar_profile.css' %}" />
<!-- <link rel="stylesheet" href="{% static 'css/bootstrap-icons.min.css' %}" /> -->
{% endblock extra_head %} {% block main %} {% if user.is_authenticated %}

<div class="sonar_profile" style="font-size: 12px">
  <div class="d-flex">
    <input
      v-model="search_input"
      class="me-2 form-control form-control input_box"
      onfocus="this.select();"
      onmouseup="return false;"
      name="search_input"
      id="search_input"
      aria-describedby="helpId"
      style="width: 120px"
      placeholder="任意关键字"
    />
    <div
      class="btn-group-sm mt-1 me-3"
      @click.prevent="update_search_kw"
      role="group"
      aria-label="Basic example"
    >
      <button type="button" class="btn btn-primary">Search</button>
    </div>
    <div
      class="btn-group-sm mt-1 me-3"
      @click.prevent="clear_search_kw"
      role="group"
      aria-label="Basic example"
    >
      <button type="button" class="btn btn-warning">Reset</button>
    </div>
    <div
      class="pt-1 fs-5 text-dark me-2"
      v-for="kw,index in search_keywords"
      @mouseover="kw_index = index"
      @mouseleave="kw_index=999"
      style="width: 45px"
    >
      <div v-show="kw_index !=index " class="badge bg-warning text-secondary">
        [[ kw ]]
      </div>
      <i
        @click="delete_kw(kw)"
        v-show="kw_index == index"
        class="bi bi-trash"
      ></i>
    </div>
  </div>
  <div class="text-danger" v-show="input_alert_show">
    最大可输入数字为: 9999
  </div>
  <div class="">
    <div class="mt-1 w-100 px-1">
      <table id="example" class="table table-hover" style="width: 94%">
        <thead class="thead-light fs-7">
          <tr>
            <th
              @click.prevent="sort('Profile_Name')"
              :class="[sorted_item == 'Profile_Name' ? 'text-info':'']"
            >
              Name
              <i
                v-show="sorted_item == 'Profile_Name'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Freq_1')"
              :class="[sorted_item == 'Freq_1' ? 'text-info fs-6':'']"
            >
              Freq_1
              <i
                v-show="sorted_item == 'Freq_1'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Freq_2')"
              :class="[sorted_item == 'Freq_2' ? 'text-info fs-6':'']"
            >
              Freq_2
              <i
                v-show="sorted_item == 'Freq_2'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Freq_3')"
              :class="[sorted_item == 'Freq_3' ? 'text-info fs-6':'']"
            >
              Freq_3
              <i
                v-show="sorted_item == 'Freq_3'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Freq_4')"
              :class="[sorted_item == 'Freq_4' ? 'text-info fs-6':'']"
            >
              Freq_4
              <i
                v-show="sorted_item == 'Freq_4'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Freq_5')"
              :class="[sorted_item == 'Freq_5' ? 'text-info fs-6':'']"
            >
              Freq_5
              <i
                v-show="sorted_item == 'Freq_5'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('TPK')"
              :class="[sorted_item == 'TPK' ? 'text-info fs-6':'']"
            >
              TPK
              <i
                v-show="sorted_item == 'TPK'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Blades')"
              :class="[sorted_item == 'Blades' ? 'text-info fs-6':'']"
            >
              Blades
              <i
                v-show="sorted_item == 'Blades'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
            <th
              @click.prevent="sort('Active_freq')"
              :class="[sorted_item == 'Active_freq' ? 'text-info fs-6':'']"
            >
              Active_freqency
              <i
                v-show="sorted_item == 'Active_freq'"
                :class="[sort_direction == 'up' ? ' bi bi-sort-down-alt':'bi bi-sort-up']"
              ></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(profile, key) in sonar_profiles">
            <td>[[ profile.Profile_Name ]]</td>
            <td>[[ profile.Freq_1 ]]</td>
            <td>[[ profile.Freq_2 ]]</td>
            <td>[[ profile.Freq_3 ]]</td>
            <td>[[ profile.Freq_4 ]]</td>
            <td>[[ profile.Freq_5 ]]</td>
            <td>[[ profile.TPK ]]</td>
            <td>[[ profile.Blades ]]</td>
            <td>[[ profile.Active_freq ]]</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script src="{% static 'js/sonar_profile.js' %}"></script>
{% else %} {% include "pcs_login.html" %} {% endif %} {% endblock %}
